<template>
  <view class="home home_bg">
    <view class="home__box box__bg">
      <view class="home__box__contaniner">
        <view class="txt1 txt"></view>
        <view class="txt2 txt"></view>
        <view class="txt3 txt"></view>
        <view class="txt4 txt"></view>
        <view class="txt5 txt"></view>
        <view class="txt6 txt"></view>
        <!-- <view class="line"></view> -->
        <view class="start" @click="handleClick"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  components: {},
  methods: {
    handleClick() {
      this.$emit("start",2);
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
  &__box {
    position: absolute;
    left: 0;
    right: 0;
    top: 30vh;
    margin: 0 auto;
    text-align: center;
    line-height: 45rpx;
    font-size: 35rpx;
    width: 713rpx;
    height: 612rpx;
    transform: rotate(90deg);
    &__contaniner {
      padding-top:170rpx;
    }
  }

  .txt1,
  .txt2,
  .txt3,
  .txt4,
  .txt5,
  .txt6 {
    animation: fadeIn2 2s ease forwards;
    background-position: 0 -40rpx;
    top: 0;
    width: 100%;
    height: 46rpx;
    left: 0;
    opacity: 0;
    background-image: url("/static/images/first_txt.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
  .txt2 {
    animation: fadeIn2 2s ease 1s forwards;
    background-position: 0 -110rpx;
  }
  .txt3 {
    animation: fadeIn2 2s ease 2s forwards;
    background-position: 0 -178rpx;
  }
  .txt4 {
    animation: fadeIn2 2s ease 3s forwards;
    background-position: 0 -244rpx;
  }
  .txt5 {
    animation: fadeIn2 2s ease 4s forwards;
    background-position: 0 -308rpx;
  }
  .txt6 {
    animation: fadeIn2 2s ease 5s forwards;
    background-position: 0 -378rpx;
  }

  .line {
    width: 2rpx;
    height: 52rpx;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    &::before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: -100%;
      width: 100%;
      height: 100%;
      background: url("/static/images/ico_dot.png") no-repeat;
      background-size: 100% 100%;
      animation: line_ani 1s steps(5) 5.4s infinite;
    }
  }

  .start {
    width: 86rpx;
    height: 86rpx;
    opacity: 0;
    animation: fadeIn2 2s ease 6s forwards;
    position: relative;
    margin: 8rpx auto;
    &::before {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: url("/static/images/btn_start.png") no-repeat 50% 50%;
      background-size: 98% auto;
      animation: btn_ani 1s ease infinite;
      transform-origin: 50% 50%;
    }
    &::after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: url("/static/images/btn_start.png") no-repeat 50% 50%;
      background-size: 98% auto;
    }
  }
}
</style>
